<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title>show.js</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <link rel="stylesheet" href="../../../../../../css/reset.css" type="text/css" media="screen" />
<link rel="stylesheet" href="../../../../../../css/main.css" type="text/css" media="screen" />
<link rel="stylesheet" href="../../../../../../css/github.css" type="text/css" media="screen" />
<script src="../../../../../../js/jquery-1.3.2.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../../../../../../js/jquery-effect.js" type="text/javascript" charset="utf-8"></script>
<script src="../../../../../../js/main.js" type="text/javascript" charset="utf-8"></script>
<script src="../../../../../../js/highlight.pack.js" type="text/javascript" charset="utf-8"></script>

</head>

<body>
    <div class="banner">
        
        <h1>
            show.js
        </h1>
        <ul class="files">
            
            <li>
                lib/assets/javascripts/sale_app/products/show.js
                
            </li>
            <li>Last modified: 2017-01-18 19:51:00 +0800</li>
        </ul>
    </div>

    <div id="bodyContent">
        <div id="content">
  
    <div class="description">
      
<p>jQuery(function($){</p>

<pre><code>// $(document).ready(function(){
      // 图片上下滚动
      var count = $(&quot;#imageMenu li&quot;).length - 5;    显示 6 个 li标签内容   
      var interval = $(&quot;#imageMenu li:first&quot;).width();
      var curIndex = 0;

      $(&#39;.scrollbutton&#39;).click(function(){
              if( $(this).hasClass(&#39;disabled&#39;) ) return false;

              if ($(this).hasClass(&#39;smallImgUp&#39;)) --curIndex;
              else ++curIndex;

              $(&#39;.scrollbutton&#39;).removeClass(&#39;disabled&#39;);
              if (curIndex == 0) $(&#39;.smallImgUp&#39;).addClass(&#39;disabled&#39;);
              if (curIndex == count-1) $(&#39;.smallImgDown&#39;).addClass(&#39;disabled&#39;);

              $(&quot;#imageMenu ul&quot;).stop(false, true).animate({&quot;marginLeft&quot; : -curIndex*interval + &quot;px&quot;}, 600);
      });
      // 解决 ie6 select框 问题
      $.fn.decorateIframe = function(options) {
      if ($.support.msie &amp;&amp; $.support.version &lt; 7) {
          var opts = $.extend({}, $.fn.decorateIframe.defaults, options);
          $(this).each(function() {
              var $myThis = $(this);
              //创建一个IFRAME
              var divIframe = $(&quot;&lt;iframe /&gt;&quot;);
              divIframe.attr(&quot;id&quot;, opts.iframeId);
              divIframe.css(&quot;position&quot;, &quot;absolute&quot;);
              divIframe.css(&quot;display&quot;, &quot;none&quot;);
              divIframe.css(&quot;display&quot;, &quot;block&quot;);
              divIframe.css(&quot;z-index&quot;, opts.iframeZIndex);
              divIframe.css(&quot;border&quot;);
              divIframe.css(&quot;top&quot;, &quot;0&quot;);
              divIframe.css(&quot;left&quot;, &quot;0&quot;);
              if (opts.width == 0) {
                  divIframe.css(&quot;width&quot;, $myThis.width() + parseInt($myThis.css(&quot;padding&quot;)) * 2 + &quot;px&quot;);
              }
              if (opts.height == 0) {
                  divIframe.css(&quot;height&quot;, $myThis.height() + parseInt($myThis.css(&quot;padding&quot;)) * 2 + &quot;px&quot;);
              }
              divIframe.css(&quot;filter&quot;, &quot;mask(color=#fff)&quot;);
              $myThis.append(divIframe);
          });
      }
  }
  $.fn.decorateIframe.defaults = {
      iframeId: &quot;decorateIframe1&quot;,
      iframeZIndex: -1,
      width: 0,
      height: 0
  }
  //放大镜视窗
  $(&quot;#bigView&quot;).decorateIframe();
  //点击到中图
  var midChangeHandler = null;

  $(&quot;#imageMenu li img&quot;).bind(&quot;click&quot;, function(){
              if ($(this).attr(&quot;id&quot;) != &quot;onlickImg&quot;) {
                      midChange($(this).attr(&quot;src&quot;).replace(&quot;small&quot;, &quot;mid&quot;));
                      $(&quot;#imageMenu li&quot;).removeAttr(&quot;id&quot;);
                      $(this).parent().attr(&quot;id&quot;, &quot;onlickImg&quot;);
              }
      }).bind(&quot;mouseover&quot;, function(){
              if ($(this).attr(&quot;id&quot;) != &quot;onlickImg&quot;) {
                      window.clearTimeout(midChangeHandler);
                      midChange($(this).attr(&quot;src&quot;).replace(&quot;small&quot;, &quot;mid&quot;));
                      $(this).css({ &quot;border&quot;: &quot;3px solid #959595&quot; });
              }
      }).bind(&quot;mouseout&quot;, function(){
              if($(this).attr(&quot;id&quot;) != &quot;onlickImg&quot;){
                      $(this).removeAttr(&quot;style&quot;);
                      midChangeHandler = window.setTimeout(function(){
                              if ($(&quot;#onlickImg img&quot;).attr(&quot;src&quot;) != undefined){
                                      midChange($(&quot;#onlickImg img&quot;).attr(&quot;src&quot;).replace(&quot;small&quot;, &quot;mid&quot;));
                              }
                      }, 1000);
              }
      });
  function midChange(src) {
      $(&quot;#midimg&quot;).attr(&quot;src&quot;, src).load(function() {
          changeViewImg();
      });
  }
  //大视窗看图
  function mouseover(e) {
      if ($(&quot;#winSelector&quot;).css(&quot;display&quot;) == &quot;none&quot;) {
          $(&quot;#winSelector,#bigView&quot;).show();
      }
      $(&quot;#winSelector&quot;).css(fixedPosition(e));
      e.stopPropagation();
  }
  function mouseOut(e) {
      if ($(&quot;#winSelector&quot;).css(&quot;display&quot;) != &quot;none&quot;) {
          $(&quot;#winSelector,#bigView&quot;).hide();
      }
      e.stopPropagation();
  }
  $(&quot;#midimg&quot;).mouseover(mouseover); //中图事件
  $(&quot;#midimg,#winSelector&quot;).mousemove(mouseover).mouseout(mouseOut); //选择器事件

  var $divWidth = $(&quot;#winSelector&quot;).width(); //选择器宽度
  var $divHeight = $(&quot;#winSelector&quot;).height(); //选择器高度
  var $imgWidth = $(&quot;#midimg&quot;).width(); //中图宽度
  var $imgHeight = $(&quot;#midimg&quot;).height(); //中图高度
  var $viewImgWidth = $viewImgHeight = $height = null; //IE加载后才能得到 大图宽度 大图高度 大图视窗高度

  function changeViewImg() {
                      if ($(&quot;#midimg&quot;).attr(&quot;src&quot;) != undefined){
                              $(&quot;#bigView img&quot;).attr(&quot;src&quot;, $(&quot;#midimg&quot;).attr(&quot;src&quot;).replace(&quot;mid&quot;, &quot;big&quot;));
                      }

  }
  changeViewImg();
  $(&quot;#bigView&quot;).scrollLeft(0).scrollTop(0);
  function fixedPosition(e) {
      if (e == null) {
          return;
      }
      var $imgLeft = $(&quot;#midimg&quot;).offset().left; //中图左边距
      var $imgTop = $(&quot;#midimg&quot;).offset().top; //中图上边距
      X = e.pageX - $imgLeft - $divWidth / 2; //selector顶点坐标 X
      Y = e.pageY - $imgTop - $divHeight / 2; //selector顶点坐标 Y
      X = X &lt; 0 ? 0 : X;
      Y = Y &lt; 0 ? 0 : Y;
      X = X + $divWidth &gt; $imgWidth ? $imgWidth - $divWidth : X;
      Y = Y + $divHeight &gt; $imgHeight ? $imgHeight - $divHeight : Y;

      if ($viewImgWidth == null) {
          $viewImgWidth = $(&quot;#bigView img&quot;).outerWidth();
          $viewImgHeight = $(&quot;#bigView img&quot;).height();
          if ($viewImgWidth &lt; 200 || $viewImgHeight &lt; 200) {
              $viewImgWidth = $viewImgHeight = 800;
          }
          $height = $divHeight * $viewImgHeight / $imgHeight;
          $(&quot;#bigView&quot;).width($divWidth * $viewImgWidth / $imgWidth);
          $(&quot;#bigView&quot;).height($height);
      }
      var scrollX = X * $viewImgWidth / $imgWidth;
      var scrollY = Y * $viewImgHeight / $imgHeight;
      $(&quot;#bigView img&quot;).css({ &quot;left&quot;: scrollX * -1, &quot;top&quot;: scrollY * -1 });
      $(&quot;#bigView&quot;).css({ &quot;top&quot;: 75, &quot;left&quot;: $(&quot;.preview&quot;).offset().left + $(&quot;.preview&quot;).width() + 15 });

      return { left: X, top: Y };
  }</code></pre>

<p>// }); })</p>

    </div>
  


  


  
  


  


  

  



  

    

    

    


    


    <!-- Methods -->
              </div>

    </div>
  </body>
</html>
